<!--
 	* @author  gaohailan
-->
<template>
  <div id="workerStudyEdit">
    <div class="main-title">新建/编辑活动</div>
    <el-form v-loading="formloading" ref="baseForm" :model="baseForm" :rules="baseRules" class="dataForm"
             label-position="right" label-width="140px">
      <el-form-item label="活动名称" prop="activityName">
        <el-input maxlength="50"
  show-word-limit style="width: 90%" v-model="baseForm.activityName"/>
      </el-form-item>
      <el-form-item label="开始时间" prop="activityStartTime">
        <el-date-picker
          v-model="baseForm.activityStartTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width: 50%"/>
      </el-form-item>
      <el-form-item label=" 结束时间" prop="activityEndTime">
        <el-date-picker
          v-model="baseForm.activityEndTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width: 50%"/>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="baseForm.state" placeholder="请选择">
          <el-option key="0" value="0" label="启用"/>
          <el-option key="1" value="1" label="禁用"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="common-btns">
      <el-button style="padding: 8px 30px;" @click="cancel">取消</el-button>
      <el-button style="padding: 8px 30px;" type="primary" @click=" state =='create'?createData():updateData()">确定
      </el-button>
    </div>
  </div>

</template>

<script>
  import {specialText} from '@/utils/validate'
  // import { SuggestActiveInsert ,SuggestActiveUpdate } from '@/api/reasonable/index'
  import {getToken} from '@/utils/auth'
  import ImageCropper from '@/components/ImageCropper'

  export default {
    name: "ReasonableEdit",
    components: {ImageCropper},
    data() {
      return {
        state: 'create',
        formloading: false,
        imagecropperKey: 0,
        id: '',
        imgcropIndexShow: false,//封面上传窗口
        baseForm: {
          id:"",
          activityName:"",
          ifPublicity:0,
          activityStartTime:"",
          activityEndTime:"",
          state:0,
        },
        baseRules: {
          activityName: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {validator: specialText, trigger: 'blur'}
          ],
          activityStartTime: [
            {required: true, message: '请选择开始时间', trigger: 'change'},
          ],
          activityEndTime: [
            {required: true, message: '请选择结束时间', trigger: 'change'},
          ]
        },
        uploadaction: '/API-RESOURCE/upload/uploadFile',
        uploadHeaders: {'ttsxAuthToken': getToken()},
        view: '/API-RESOURCE/webView?fid=',
      }
    },
    methods: {
      cropSuccess(resData) {
        this.imgcropIndexShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.baseForm.fid = resData[0].id
      },
      close() {
        this.imgcropIndexShow = false
      },
      createData() {
        this.$refs['baseForm'].validate((valid) => {
          if (valid) {
            if (this.baseForm.img == '') {
              this.$message({
                message: '请上传活动图片',
                type: 'warning'
              });
              return
            }
            let postData = Object.assign({}, this.baseForm)
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            return new Promise((resolve, reject) => {
              SuggestActiveInsert(postData).then(() => {
                loading.close()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 1500
                })
                this.$router.push({path: '/reasonable/index', name: 'ReasonableMain'});
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          }
        })
      },
      updateData() {
        this.$refs['baseForm'].validate((valid) => {
          if (valid) {
            if (this.baseForm.fid == '') {
              this.$message({
                message: '请上传活动图片',
                type: 'warning'
              });
              return
            }
            let postData = Object.assign({}, this.baseForm)
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            let params = {
                  id:this.baseForm.id,
                  activityName:this.baseForm.activityName,
                  ifPublicity:this.baseForm.ifPublicity,
                  activityStartTime:this.baseForm.activityStartTime,
                  activityEndTime:this.baseForm.activityEndTime,
                  state:this.baseForm.state,
                }
            return new Promise((resolve, reject) => {
              SuggestActiveUpdate(params).then(() => {
                loading.close()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 1500
                })
                this.$router.push({path: '/reasonable/index', name: 'ReasonableMain'});
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })

          }
        })
      },
      cancel() {
        this.$router.push({path: '/reasonable/index', name: 'ReasonableMain'});
      }
    },
    created() {
    /*  this.id = this.$route.query.id || '';
      if (this.id) {
        this.baseForm = this.$route.query.rowData;
        console.log(this.baseForm,"111");
        this.state = 'update'
      }else{
        this.baseForm.state=''
      }
*/
    }
  }
</script>

<style lang="scss">
  $mainColor: #18A5FD;

  .el-select .el-input {
    width: 150px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  #workerStudyEdit {
    background-color: #fff;
    padding: 40px;
    padding-top: 20px;
    .main-title{
      position: relative;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background-color: #ffffff;
      border-bottom: 1px solid #E5E5E5;
      font-family:PingFangSC-Medium;
      font-weight: bold;
      color:rgba(51,51,51,1);
      font-size: 14px;
      &:before{
        content: "";
        position: absolute;
        width: 2px;
        background-color: $mainColor;
        top: 13px;
        bottom: 13px;
        left: 15px;
      }
    }
    .dataForm{
      width: 800px;
      margin: 20px auto 0;
    }
    .common-btns {
      text-align: center;
    }
  }
</style>
